gs = 8px
br = 3px
PX = (1/16)em

retina(path, size= 100%, color= white)
  background color url(path+'.png') no-repeat center center
  background-size size
  @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)
    background color url(path+'-@2x.png') no-repeat center center
    background-size size

shadow()
  box-shadow (gs/2) (gs/2) 0 rgba(rgb(c-grey1), .25)

random(a,b)
  return math(math(0, 'random')*(b - a + 1) + a, 'floor')

norm(font,pixelSize)
  (1/(font/16))*pixelSize

center(size)
  position absolute
  nw 50%
  margin-top  -(size/2)
  margin-left -(size/2)

t(position)
  top position

b(position)
  bottom position 

l(position)
  left position

r(position)
  right position

nw(position=0)
  top   position
  left  position
ne(position=0)
  top   position 
  right   position
sw(position=0)
  bottom  position
  left  position
se(position=0)
  bottom  position
  right   position

bbox()
  box-sizing border-box

cbox()
  box-sizing content-box

// rect(size)
//   width size
//   height size

// min-rect(size)
//   min-width size
//   min-height size

hl(color, size=1px)
  outline size solid color

textel()
  white-space: nowrap
  -webkit-text-overflow: ellipsis
  -moz-text-overflow: ellipsis
  -o-text-overflow: ellipsis
  text-overflow: ellipsis
  overflow:hidden

placeholder-mixin(args)
  &::-webkit-input-placeholder { /* WebKit browsers */
        color: args.color
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: args.color
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: args.colorg
  }
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
      color: args.color
  }

II = !important

